<template>
     <el-card class="recommend-exam">
          <template #header>
            <div class="card-header">

              <span><img height="32" width="32" src="/images/edu/recommend.png" alt="分类图标">推荐考试</span>
              <p class="current-time">当前时间：{{ currentTime }}</p>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col v-for="(exam, index) in recommendItems" :key="index" :xs="24" :sm="12" :md="8">
              <div class="exam-card">
                <el-image :src="exam.cover" class="exam-cover" fit="cover" />
                <div class="exam-info">
                  <h4>{{ exam.title }}</h4>
                  <div class="meta-info">
                    <span><el-icon>
                        <Clock />
                      </el-icon> {{ exam.examDuration }}分钟</span>
                    <span><el-icon>
                        <User />
                      </el-icon> {{ exam.participants }}人已考</span>
                  </div>
                  

                  <!--进度条 start-->
                  <div class="countdown-container">
                  <el-progress 
                    :percentage="currentPercentage(exam)"
                    :color="statusColor(exam)"
                  />
                  <span class="countdown-label">{{ countdownText(exam) }}</span>
                </div>
                  <!--进度条 end-->

                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
</template>
<script setup lang="ts">
import { ref,onMounted,onBeforeUnmount,reactive } from 'vue'
  const props = defineProps({
    recommendItems: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: true
    }
  })
  // 时间相关
const currentTime = ref('')
const updateTime = () => {
  currentTime.value = new Date().toLocaleString()
}

// 当前时间
const now = ref(Date.now())
// 当前状态计算
const currentStatus = (exam:any) => {
  if (now.value < exam.startTime) return 'before'
  if (now.value < exam.endTime) return 'in-progress'
  return 'ended'
}

// 倒计时文本
const countdownText = (exam: any) => {
  const status = currentStatus(exam)
  
  // 处理已结束状态
  if (status === 'ended') return '考试已结束'

  // 计算时间差
  const diff = status === 'before' 
    ? exam.startTime - now.value 
    : exam.endTime - now.value

  // 添加秒数计算
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
  const seconds = Math.floor((diff % (1000 * 60)) / 1000)

  // 返回带秒数的字符串
  return status === 'before'
    ? `距开始: ${days}天 ${hours}时 ${minutes}分 ${seconds}秒`
    : `距结束: ${days}天 ${hours}时 ${minutes}分 ${seconds}秒`
}


// 进度百分比计算（动态模式）
const currentPercentage = (exam: { startTime: number; endTime: number }) => {
  const status = currentStatus(exam)
  
  switch(status) {
    case 'before': {
      // 动态计算：从当前时刻到考试开始的实时进度
      const startRemaining = exam.startTime - now.value
      // 如果考试即将在24小时内开始，按实际时间比例计算
      const dynamicTotal = Math.max(24 * 60 * 60 * 1000, startRemaining)
      const percentage = ((dynamicTotal - startRemaining) / dynamicTotal) * 100
      return Math.min(100, Math.max(0, Number(percentage.toFixed(2))))
    }

    case 'in-progress': {
      const totalExam = exam.endTime - exam.startTime
      if (totalExam <= 0) return 0
      const elapsedTime = now.value - exam.startTime
      const percentage = (elapsedTime / totalExam) * 100
      return Math.min(100, Math.max(0, Number(percentage.toFixed(2))))
    }

    default:
      return 0
  }
}

// 状态对应的进度条颜色
const statusColor = (exam:  any) => {
  return currentStatus(exam) === 'before' ? '#e6a23c' : '#5cb87a'
}



// 定时器
let timer: any
onMounted(() => {
  updateTime()
  timer = setInterval(() => {
    updateTime()
    now.value = Date.now()
    
  }, 1000)
})

onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>
@use '@/assets/scss/variables' as *; 
  // 推荐考试 start
  .recommend-exam {

    .countdown-container {
  margin-top: 15px;
}

.countdown-label {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}

.el-progress {
  margin: 5px 0;
}

.exam-info {
  padding: 15px;
}

.meta-info {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}
    .card-header {
      display: flex;
      // 设置水平方向
      justify-content: space-between;
      font-size: 18px;
      font-weight: 600;
      color: #303133;

      img {
        vertical-align: text-bottom;
        margin-right: 8px;
      }

      .current-time {
        color: #909399;
        font-size: 15px;
        font-weight: 500;
      }

    }

    .exam-card {
      border-radius: 8px;
      overflow: hidden;
      background: white;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        transform: translateY(-3px);
      }

      .exam-cover {
        width: 100%;
        height: 180px;
      }

      .exam-info {
        padding: 15px;

        h4 {
          color: $text-primary;
          margin-bottom: 12px;
          height: 44px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .meta-info {
          display: flex;
          justify-content: space-between;
          color: $text-secondary;
          font-size: 12px;
          margin-bottom: 15px;

          .el-icon {
            margin-right: 5px;
          }
        }

        .exam-button {
          width: 100%;
        }
      }
    }
  }

  // 推荐考试 end

</style>